<template>
    <el-col class="app-container" style="margin-bottom: 80px">
        <div >
            <el-input v-model="queryParams.realName" :placeholder="namePlaceholder" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
            <el-input v-model="queryParams.mobile" :placeholder="mobilePlaceholder" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
            <el-select v-model="queryParams.userType" :placeholder="userTypePlaceholder" filterable style="width: 200px;">
                <el-option
                    v-for="item in userTypeInfo"
                    :key="item.id"
                    :label="item.text"
                    :value="item.id"/>
            </el-select>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{$t('common.query')}}</el-button>
            <el-button v-permit="'/user/createUser'" class="filter-item" style="margin-left: 20px;" type="success" icon="el-icon-edit" @click="dialogStatus= 'create';dialogVisible = true;resetForm('ruleForm');">{{$t('common.add')}}</el-button>
            <el-table
                :data="tableData"
                pager-count="0"
                border
                style="width: 90%;margin-top: 20px">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" class="demo-table-expand">
                            <el-form-item :label="$t('person.sex')">
                                <span>{{ props.row.sex }}</span>
                            </el-form-item>
                            <el-form-item :label="$t('person.birthday')">
                                <span>{{ props.row.birthday }}</span>
                            </el-form-item>
                            <el-form-item :label="$t('contact.mail')">
                                <span>{{ props.row.bindEmail }}</span>
                            </el-form-item>
                            <el-form-item :label="$t('contact.wechat')">
                                <span>{{ props.row.wechatAccount }}</span>
                            </el-form-item>
                            <el-form-item :label="$t('contact.qq')">
                                <span>{{ props.row.qqAccount }}</span>
                            </el-form-item>
                            <el-form-item :label="$t('person.avatar')">
                                <span><img :src="props.row.headPhoto" min-width="70" height="70" ></span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column prop="loginName" label="登入账号"/>
                <el-table-column prop="realName" :label="$t('person.realname')"/>
                <el-table-column prop="mobile" :label="$t('contact.phone')"/>
                <el-table-column prop="nickName" :label="$t('person.nickname')"/>
                <el-table-column fixed="right" :label="$t('common.operation')">
                    <template slot-scope="scope">
                        <el-button v-permit="'/user/userInfoById'" type="primary" size="mini" @click="handleUpdate(scope.row.id)">{{$t('common.edit')}}</el-button>
                        <el-button v-permit="'/user/userAuthInfo'" type="success" size="mini" @click="corpUser(scope.row.userUid,scope.row.realName)">{{$t('common.authInfo')}}</el-button>
                        <!-- <el-button type="success" size="mini" @click="corpUser(scope.row.userUid,scope.row.realName)">授权信息</el-button> -->
                        <el-button v-permit="'/user/deleteUser'" type="danger" size="mini" @click="delUser(scope.row.userUid)">{{$t('common.delete')}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                :current-page.sync="queryParams.page"
                :page-size.sync="queryParams.limit"
                :total="total"
                :page-sizes="pageSizes"
                layout="total, sizes, prev, pager, next, jumper"
                style="margin-top: 20px"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"/>

            <!--模式对话框-->
            <el-dialog
                :visible.sync="dialogVisible"
                :title="$t('person.userinfo')"
                :close-on-click-modal="false"
                width="40%">
        <span>
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item :label="$t('person.realname')" prop="realName">
              <el-input v-model="ruleForm.realName" />
              <span class="notes">请输入2-20个中文字符</span>
            </el-form-item>
            <el-form-item :label="$t('person.nickname')" prop="nickName">
              <el-input v-model="ruleForm.nickName"/>
              <span class="notes">请输入2-30个字符</span>
            </el-form-item>
            <el-form-item :label="$t('contact.account')" prop="loginName">
              <el-input v-if="dialogStatus=='create'" v-model="ruleForm.loginName"/>
              <el-input v-else v-model="ruleForm.loginName" disabled />
            </el-form-item>
            <el-form-item v-if="dialogStatus=='create'" :label="$t('contact.password')" prop="password">
              <el-input v-model="ruleForm.password" show-password/>
            </el-form-item>
              <!-- <el-form-item :label="$t('person.type')">
                <el-select v-model="ruleForm.userType" multiple style="width: 100%">
                  <el-option
                    v-for="item in userTypeInfo"
                    :key="item.id"
                    :label="item.text"
                    :value="item.id"/>
                </el-select>
              </el-form-item> -->
            <el-form-item :label="$t('person.sex')">
              <el-select v-model="ruleForm.sex" style="width: 100%" >
                <el-option
                    v-for="item in sexInfo"
                    :key="item.id"
                    :label="item.text"
                    :value="item.id"/>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('contact.phone')" prop="mobile">
              <el-input v-model="ruleForm.mobile"/>
            </el-form-item>
            <el-form-item :label="$t('person.idcard')" prop="idcard">
              <el-input v-model="ruleForm.idcard"/>
            </el-form-item>
            <el-form-item :label="$t('contact.qq')" prop="qqAccount">
              <el-input v-model="ruleForm.qqAccount" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"/>
              <span class="notes">请输入2-30个数字字符</span>
            </el-form-item>
            <el-form-item :label="$t('contact.wechat')" prop="wechatAccount">
              <el-input v-model="ruleForm.wechatAccount"/>
              <span class="notes">请输入2-30个字符</span>
            </el-form-item>
            <el-form-item :label="$t('contact.mail')" prop="bindEmail">
              <el-input v-model="ruleForm.bindEmail"/>
            </el-form-item>
            <el-form-item :label="$t('person.birthday')" prop="birthday">
              <el-date-picker
                  v-model="ruleForm.birthday"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"/>
            </el-form-item>
            <el-form-item :label="$t('person.avatar')" prop="headPhoto">
              <el-upload
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :action="imgUploadUrls"
                  class="avatar-uploader">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"/>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">{{$t('common.confirm')}}</el-button>
              <el-button @click="resetForm('ruleForm')">{{$t('common.reset')}}</el-button>
              <el-button @click="dialogVisible = false">{{$t('common.cancel')}}</el-button>
            </el-form-item>
          </el-form>
        </span>
            </el-dialog>

            <el-dialog
                :visible.sync="dialogVisibleCorp"
                :close-on-click-modal="false"
                title="用户授权信息"
                width="60%">
        <span>
          <el-form ref="corpForm" :model="corpForm" :rules="corpRules" label-width="100px" class="demo-corpForm">
            <el-form-item :label="$t('common.role')" prop="roleUid">
              <el-select v-model="corpForm.roleUid" multiple placeholder="请选择" style="width: 100%" @change="roleInfo">
                <el-option
                    v-for="roleItem in roleInfoData"
                    :label="roleItem.roleName"
                    :key="roleItem.roleUid"
                    :value="roleItem.roleUid"/>
              </el-select>
            </el-form-item>
              <!--<el-form-item label="企业信息" prop="corpUid" >-->
              <!--<el-cascader-->
              <!--v-model="corpForm.corpUid"-->
              <!--:options="corpProps"-->
              <!--:props="{ multiple: true}"-->
              <!--style="width: 100%"-->
              <!--clearable-->
              <!--@visible-change="corpTree">-->
              <!--<span slot-scope="{ node, data }" class="custom-tree-node">-->
              <!--<span v-if="data.type=='corp'">{{ node.label }}(企业)</span>-->
              <!--<span v-else>{{ node.label }}(企业结构)</span>-->
              <!--</span>-->
              <!--</el-cascader>-->
              <!--</el-form-item>-->
            <el-form-item :label="$t('common.authMode')" prop="dataModel" >
              <el-select v-model="corpForm.dataModel" placeholder="请选择数据授权模式" style="width: 100%" @change="changeModel">
                <el-option
                    v-for="dataItem in grantModel"
                    :label="dataItem.text"
                    :key="dataItem.id"
                    :value="dataItem.id"/>
              </el-select>
            </el-form-item>
              <el-form-item :label="$t('common.authScope')" prop="authDistrict" v-if="authDistrictStatus" >
              <el-cascader
                  :props="{ value: 'id',label:'name',multiple: true }"
                  :options="areaProps"
                  v-model="corpForm.authDistrict"
                  style="width: 100%"
                  placeholder="请选择省/市/区/街道"
                  clearable
                  filterable/>
            </el-form-item>

            <el-form-item :label="$t('common.authInfo')" prop="authCorpUid" v-if="authCorpUidStatus" >
              <el-cascader
                  v-model="corpForm.authCorpUid"
                  placeholder="请选择"
                  :options="authCorpProps"
                  :props="{ multiple: true }"
                  clearable
                  @focus="corpTreeInfo"
              >
                <template slot-scope="{ node, data }">
                  <div @click="cascaderClick(node)">
                    <span>{{ data.label }}</span>
                  </div>
                </template>
              </el-cascader>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitCorpForm('corpForm')">{{$t('common.confirm')}}</el-button>
              <el-button @click="resetCorpForm('corpForm')">{{$t('common.reset')}}</el-button>
              <el-button @click="dialogVisibleCorp = false">{{$t('common.cancel')}}</el-button>
            </el-form-item>
          </el-form>
        </span>
            </el-dialog>
        </div>
    </el-col>
</template>
<script>
    import { userInfo, createUser, userInfoById, deleteUser, updateUser, userCorpOpt, dataModel, userAuthInfo } from '@/api/user/user'
    import { roleInfo } from '@/api/role/role'
    import { corpTreeInfo } from '@/api/corp/corp'
    import { validateIdNo, validatePhoneTwo, validateEMail, isIntegerNotMust, isPassword } from '@/api/validate'
    import info from '@/api/common/globalVariable'
    import SelectTree from '@/components/SelectTree/selectTree.vue'
    import cityData from '@/address.json'

    export default {
        components: {
            SelectTree
        },
        data() {
            const limit = localStorage.getItem('limit') === null ? 5 : parseInt(localStorage.getItem('limit'))
            return {
                authDistrictStatus: false,
                authCorpUidStatus: false,
                imageUrl: '',
                imgUploadUrls: info.imgUploadUrl,
                total: 0,
                pageSizes: [5, 10, 20, 50],
                namePlaceholder: '请输入用户真实名称',
                mobilePlaceholder: '请输入用户电话号码',
                userTypePlaceholder: '请选择用户类型',
                roleInfoData: [],
                provinces: [],
                provincesOptions: [],
                areaProps: cityData,
                corpProps: [],
                authCorpProps: [],
                structureProps: [],
                corpForm: {
                    userUid: '',
                    name: '',
                    authDistrict: [],
                    corpUid: [],
                    authCorpUid: [],
                    type: '',
                    dataModel: '',
                    roleUid: []
                },
                queryParams: {
                    page: 1,
                    limit: limit
                },
                sexInfo: [{ id: 0, text: '未知' }, { id: 1, text: '男' }, { id: 2, text: '女' }],
                userTypeInfo: [{ id: 'app', text: 'APP用户' }, { id: 'manager', text: '后台管理用户' }],
                grantModel: [],
                handleClose: false,
                handleCloseCorp: false,
                dialogVisible: false,
                dialogVisibleCorp: false,
                tableData: [],
                dialogStatus: 'create',
                ruleForm: {
                    userUid: '',
                    realName: '',
                    nickName: '',
                    sex: '0',
                    mobile: '',
                    idcard: '',
                    bindEmail: '',
                    headPhoto: '',
                    qqAccount: '',
                    wechatAccount: '',
                    birthday: '',
                    password: '',
                    loginName: '',
                    userType: ''

                },
                rules: {
                    nickName: [
                        { required: true, message: '昵称不能为空', trigger: 'change' },
                        { min: 2, max: 20, message: '用户昵称长度在2到30个字符', trigger: 'change' }
                    ],
                    realName: [
                        { required: true, message: '真实姓名不能为空', trigger: 'change' },
                        { min: 2, max: 20, message: '用户真实姓名长度在2到20个字符', trigger: 'change' }
                    ],
                    loginName: [
                        { required: true, message: '登陆账号不能为空', trigger: 'change' },
                        { min: 5, max: 50, message: '登陆账号长度在5到50个字符', trigger: 'change' },
                        { validator: isPassword, message: '登陆账号仅由英文字母，数字以及下划线组成', trigger: 'change' }
                    ],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'change' },
                        { min: 1, message: '密码不能为空', trigger: 'change' },
                        // { validator: isPassword, message: '密码仅由英文字母，数字以及下划线组成', trigger: 'change' }
                    ],
                    sex: [
                        { required: true, message: '请选择用户性别', trigger: 'change' }
                    ],
                    mobile: [
                        { required: true, message: '请填写电话号码', trigger: 'change' },
                        { validator: validatePhoneTwo, message: '电话号码错误', trigger: 'change' }
                    ],
                    idcard: [
                        { validator: validateIdNo, message: '身份证号码错误', trigger: 'change' }
                    ],
                    bindEmail: [
                        { validator: validateEMail, message: '邮箱格式错误', trigger: 'change' }
                    ],
                    userType: [
                        { required: true, message: '请选择用户类型', trigger: 'change' }
                    ],
                    qqAccount: [
                        { min: 2, max: 30, message: '请输入2-30个数字字符串', trigger: 'change' },
                        { validator: isIntegerNotMust, message: 'QQ号为正整数', trigger: 'change' }
                    ],
                    wechatAccount: [
                        { min: 2, max: 30, message: '请输入2-30个字符', trigger: 'change' }
                    ]
                },
                corpRules: {
                    userUid: [
                        { required: true, message: '网络异常，获取用户ID失败，请稍后再试', trigger: 'change' },
                        { min: 2, max: 50, message: '网络异常，获取用户ID失败，请稍后再试', trigger: 'change' }
                    ],
                    corpUid: [
                        { type: 'array', required: true, message: '请选择企业信息', trigger: 'change' }
                    ],
                    dataModel: [
                        { required: true, message: '请选择授权模式', trigger: 'blur' },
                        // { min: 1, max: 100, message: '请选择授权模式', trigger: 'change' }
                    ],
                    // roleUid: [
                    //   { type: 'array', required: true, message: '请选择角色', trigger: 'change' }
                    // ]
                }
            }
        },
        created() {
            this.fetchData()
        },
        methods: {
            cascaderClick(node) {
                console.log("corpForm", );

                var el = document.getElementsByClassName("el-cascader-menu");

                if(node.isLeaf && node.level == 1) {
                    if(el[1]) {
                        el[1].style.display = "none";
                    }
                }else{
                    if(el[1]) {
                        el[1].style.display = "block";
                    }
                }
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data[0].uri
                this.ruleForm.headPhoto = res.data[0].newName
                if (this.imageUrl !== undefined && this.imageUrl.substring(0, 4) !== 'http') {
                    this.imageUrl = info.imgHeadUrl + this.imageUrl
                }
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2
                const isJPEG = file.type === 'image/jpeg'
                const isJPG = file.type === 'image/jpg'
                const isPNG = file.type === 'image/png'
                if (!isJPEG && !isJPG && !isPNG) {
                    this.$message.error('请上传JPN,JPEG,PNG格式图片!')
                    return false
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!')
                    return false
                }
                return isLt2M
            },
            handleSizeChange(val) {
                localStorage.setItem('limit', val)
                this.queryParams.limit = val
                this.fetchData()
            },
            handleCurrentChange(val) {
                this.queryParams.page = val
                this.fetchData()
            },
            handleFilter() {
                this.queryParams.page = 1
                this.fetchData()
            },
            initData() {
                this.ruleForm = {
                    userUid: '',
                    realName: '',
                    nickName: '',
                    sex: '',
                    mobile: '',
                    idcard: '',
                    bindEmail: '',
                    headPhoto: '',
                    qqAccount: '',
                    wechatAccount: '',
                    birthday: '',
                    password: '',
                    loginName: '',
                    userType: ''
                }
            },
            initCorpData() {
                this.corpForm = {
                    name: '',
                    authDistrict: [],
                    // corpUid: [],
                    authCorpUid: [],
                    roleUid: [],
                    dataModel: ''
                }
            },
            // structurePropsInfo(corpUid, corpStructureUid) {
            //   const corpUidStr = corpUid.toString()
            //   if (corpUidStr.length === 0) {
            //     this.$message.error('请选择企业消息')
            //     return false
            //   }
            //   this.structureProps = {
            //     multiple: true,
            //     lazy: true,
            //     lazyLoad(node, resolve) {
            //       childCorpStructure({ 'corpUid': corpUidStr, 'corpStructureUid': node.value }).then((res) => {
            //         if (res.data !== undefined) {
            //           resolve(res.data)
            //         }
            //       })
            //     }
            //   }
            // },
            // 查询数据
            fetchData() {
                // this.listLoading = false // 很重要，在所有数据返回前，页面要一直显示 loading
                userInfo(this.queryParams).then((res) => {
                    res.data.forEach((item, index, arr) => {
                        if (item.mobile != null) {
                            item.mobile = item.mobile.substr(0, 3) + '****' + item.mobile.substr(7, item.mobile.split('').length)
                        }
                        if (item.sex === 1) {
                            item.sex = '男'
                        } else if (item.sex === 2) {
                            item.sex = '女'
                        } else {
                            item.sex = '未知'
                        }

                        if (item.userType !== null) {
                            let type = ''
                            if (item.userType.indexOf('app') > 0 && item.userType.indexOf('manager') > 0) {
                                type = 'app用户,后台管理用户'
                            } else if (item.userType.indexOf('app') > 0) {
                                type = 'app用户'
                            } else if (item.userType.indexOf('manager') > 0) {
                                type = '后台管理用户'
                            }
                            item.userType = type
                        }
                        if (item.headPhoto !== undefined && item.headPhoto.substring(0, 3) !== 'http') {
                            item.headPhoto = info.imgHeadUrl + item.headPhoto
                        }
                    })
                    this.tableData = res.data
                    this.queryParams.page = res.page
                    this.total = res.total
                })
            },
            roleInfo() {
                roleInfo({ page: 1, limit: 10000 }).then(res => {
                    this.roleInfoData = res.data
                })
            },
            handleUpdate(id) {
                userInfoById(id).then(response => {
                    if (response.code === 200) {
                        this.ruleForm = response.data[0]
                        this.dialogVisible = true
                        this.dialogStatus = 'update'
                        if (this.ruleForm.headPhoto !== undefined) {
                            this.imageUrl = { url: this.ruleForm.headPhoto }
                        }

                        if (this.ruleForm.userType === undefined || this.ruleForm.userType === '[]' || this.ruleForm.userType.length==0) {
                            this.ruleForm.userType = ""
                        } else {
                            this.ruleForm.userType = JSON.parse(this.ruleForm.userType)
                        }
                        if (this.ruleForm.headPhoto !== undefined && this.ruleForm.headPhoto.length>0 && this.ruleForm.headPhoto.substring(0, 3) !== 'http') {
                            this.imageUrl = info.imgHeadUrl + this.ruleForm.headPhoto
                        } else if (this.ruleForm.headPhoto !== undefined) {
                            this.imageUrl = this.ruleForm.headPhoto
                        }
                    }
                })
            },
            corpUser(uid, name) {
                dataModel().then(res => {
                    if (res.data !== undefined) {
                        this.grantModel = res.data
                    }
                })
                this.corpTree()
                this.roleInfo()
                userAuthInfo({ 'userUid': uid }).then(response => {
                    console.log("userAuthInfo", response);

                    if (response.data[0] !== undefined) {
                        this.corpForm = response.data[0]

                        if (response.data[0].authDistrict === undefined) {
                            this.corpForm.authDistrict = []
                        } else {
                            this.corpForm.authDistrict = JSON.parse(this.corpForm.authDistrict)
                        }
                        if (response.data[0].authCorpStructUidJson === undefined) {
                            this.corpForm.authCorpUid = []
                        } else {
                            this.corpForm.authCorpUid = JSON.parse(response.data[0].authCorpStructUidJson)
                        }
                        // if (response.data[0].corpStructureJson === undefined) {
                        //   this.corpForm.corpUid = []
                        // } else {
                        //   this.corpForm.corpUid = JSON.parse(response.data[0].corpStructureJson)
                        // }

                        if (response.data[0].roleUidJson === undefined) {
                            this.corpForm.roleUid = []
                        } else {
                            this.corpForm.roleUid = JSON.parse(response.data[0].roleUidJson)
                        }
                        this.changeModel(this.corpForm.dataModel)
                    } else {
                        this.changeModel('')
                        this.initCorpData()
                    }
                })
                this.corpForm.name = name
                this.corpForm.userUid = uid
                this.dialogVisibleCorp = true
                // this.areaProps
                this.corpTree()
            },
            corpTreeInfo() {
                corpTreeInfo({ type: '' }).then((res) => {
                    console.log("corpTreeInfo", res);

                    this.authCorpProps = res.data;
                })
            },
            // 获取企业信息
            corpTree() {
                corpTreeInfo({ type: 'structure' }).then((res) => {
                    this.corpProps = res.data
                    // this.corpProps.forEach((item, index, arr) => {
                    //   if (item.type === 'corp') {
                    //     item.label += '（企业）'
                    //   } else {
                    //     item.label += '（企业结构）'
                    //   }
                    // })
                })
            },

            changeModel(node) {
                switch (this.corpForm.dataModel) {
                    case 'CORP':
                        this.authDistrictStatus = false
                        this.authCorpUidStatus = true
                        this.corpTreeInfo()
                        break
                    case 'COPR_STRUCT_AUTH':
                        this.authDistrictStatus = false
                        this.authCorpUidStatus = true
                        break
                    case 'AREA':

                        this.authDistrictStatus = true
                        this.authCorpUidStatus = false
                        break
                    case 'NO_LIMIT':
                        this.authDistrictStatus = false
                        this.authCorpUidStatus = false
                        break
                    default:
                        this.authDistrictStatus = false
                        this.authCorpUidStatus = false
                        break
                }
            },
            delUser(numId) {
                this.$confirm('是否删除该条数据?', '删除确认', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(() => {
                    deleteUser(numId).then((res) => {
                        let title
                        let type
                        if (res.code === 200) {
                            title = '成功'
                            type = 'success'
                        } else {
                            title = '失败'
                            type = 'error'
                        }
                        this.$notify({
                            title: title,
                            message: res.msg,
                            type: type,
                            duration: 2000

                        })
                        this.queryParams.page=1
                        this.fetchData()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'

                    })
                })
            },
            confirmClose() {},
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.ruleForm.userType === undefined || this.ruleForm.userType === '[]' || this.ruleForm.userType.length==0) {
                            this.ruleForm.userType = ""
                        } else {
                            this.ruleForm.userType = JSON.stringify(this.ruleForm.userType)
                        }
                        if (this.dialogStatus === 'create') {
                            createUser(this.ruleForm).then((res) => {
                                if (res.code === 200) {
                                    this.$notify({
                                        title: '成功',
                                        type: 'success',
                                        message: res.msg,
                                        duration: 2000
                                    })
                                    this.dialogVisible = false;
                                    this.fetchData();
                                } else {
                                    this.$notify({
                                        title: '失败',
                                        type: 'error',
                                        message: res.msg,
                                        duration: 2000
                                    })
                                }
                            })
                        }
                        if (this.dialogStatus === 'update') {
                            updateUser(this.ruleForm).then((res) => {
                                let title
                                let type
                                if (res.code === 200) {
                                    this.$notify({
                                        title: '成功',
                                        type: 'success',
                                        message: res.msg,
                                        duration: 2000
                                    })
                                    this.dialogVisible = false
                                    this.fetchData()
                                } else {
                                    this.$notify({
                                        title: '失败',
                                        type: 'error',
                                        message: res.msg,
                                        duration: 2000
                                    })
                                }
                            })
                        }
                    }
                })
            },
            submitCorpForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.corpForm.corpUid !== []) {
                            // this.corpForm.corpUid = this.corpForm.corpUid.toString()
                            this.corpForm.corpUid = JSON.stringify(this.corpForm.corpUid)
                        }
                        if (this.corpForm.authCorpUid !== []) {
                            // this.corpForm.authCorpUid = this.corpForm.authCorpUid.toString()
                            this.corpForm.authCorpUid = JSON.stringify(this.corpForm.authCorpUid)
                        }
                        if (this.corpForm.authDistrict !== []) {
                            this.corpForm.authDistrict = JSON.stringify(this.corpForm.authDistrict)
                        }
                        if (this.corpForm.roleUid !== []) {
                            this.corpForm.roleUid = JSON.stringify(this.corpForm.roleUid)
                        }
                        userCorpOpt(this.corpForm).then((res) => {
                            let title
                            let type
                            if (res.code === 200) {
                                title = '成功'
                                type = 'success'
                            } else {
                                title = '失败'
                                type = 'error'
                            }
                            this.$notify({
                                title: title,
                                message: res.msg,
                                type: type,
                                duration: 2000
                            })
                            this.dialogVisibleCorp = false
                            return false
                        })
                    }
                })
            },
            resetForm(formName) {
                this.initData()
                this.$nextTick(() => {
                    this.$refs[formName].clearValidate()
                })
                this.imageUrl = ''
            },
            resetCorpForm(formName) {
                this.initCorpData()
                this.$nextTick(() => {
                    this.$refs[formName].clearValidate()
                })
            }
        }
    }
</script>
<style scoped>
    .notes{
        color: #939090
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 120px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
